<template>

    <div class="panel-style panel-box">
        <div class="pad-b-20 flex v-align-c">
            <h2 class="font-18 flex-item">订单概况</h2>
            <el-tabs v-model="dateType" class="mar-r-10" @tab-click="handleClick">
                <el-tab-pane label="今天" name="1"></el-tab-pane>
                <el-tab-pane label="昨天" name="2"></el-tab-pane>
                <el-tab-pane label="近7天" name="3"></el-tab-pane>
                <el-tab-pane label="近30天" name="4"></el-tab-pane>
            </el-tabs>
        </div>
        <div class="pad-b-20 number-panel">
            <el-row>
                <el-col :span="8">
                    <p class="align-c font-28 mar-t-15 mar-b-15 number-orange">{{orderNumTotal}}</p>
                    <p class="align-c font-16 mar-15 pad-b-30">成交订单(笔)</p>
                </el-col>
                <el-col :span="8">
                    <p class="align-c font-28 mar-t-15 mar-b-15 number-orange">{{orderPriceTotal}}</p>
                    <p class="align-c font-16 mar-15 pad-b-30">成交额(元)</p>
                </el-col>
                <el-col :span="8">
                    <p class="align-c font-28 mar-t-15 mar-b-15 number-orange">{{unitPrice}}</p>
                    <p class="align-c font-16 mar-15 pad-b-30">客单价(元/笔)</p>
                </el-col>
            </el-row>
        </div>
    </div>

</template>

<style lang="scss" scoped>

    .bar-show{
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        padding: 20px 0px 20px 20px;
    }
    .number-panel{
        height: 204px;
        padding-top: 40px;
    }
    .number-orange{
        color: #fe980f;
    }
    .bar-icon{
        font-size: 42px!important;
        &.one-icon{
            font-size: 50px!important;
        }
        &.two-icon{
            font-size: 46px!important;
        }
        &.three-icon{
            font-size: 65px!important;
        }
    }
    .user-avatar {
        width: 46px;
        height: 46px;
        display: block;
        border-radius: 50px;
    }
    .panel-box{
        h2{
            margin: 0;
            padding: 0;
        }
        .more-btn{
            cursor: pointer;
            color: #36a3f7;
        }
    }
    .chart-wrapper {
        background: #fff;
        padding: 16px 16px 0;
        margin-bottom: 32px;
    }
    .panel-style {
        background: #fff;
        padding: 16px 0px 0 20px;
        margin-bottom: 32px;
        &.panel-box{
            padding: 16px 20px 0 20px;
        }
    }

</style>
<script>
  import { statOrderTotal } from '@/api/goods/goods-statistics'

  export default {
    data() {
      return {
        dateType: '1',
        dataList: [],
        orderNumTotal: 0,
        orderPriceTotal: 0,
        unitPrice: 0,
        listLoading: false
      }
    },
    // 初始化页面
    created() {
      this.initData()
    },
    methods: {
      initData() {
        const enterpriseId = this.getEnterpriseId()
        const data = {
          enterpriseId: enterpriseId,
          dateType: this.dateType
        }
        statOrderTotal(data).then(response => {
          this.orderNumTotal = response.data.orderNumTotal
          this.orderPriceTotal = response.data.orderPriceTotal
          this.unitPrice = response.data.unitPrice
        })
      },
      handleClick() {
        this.initData()
      }
    }
  }
</script>
